{% extends "base.html" %}

{% block css %}
	tr.border:nth-child(odd)    { background-color:#eee; }
	tr.border:nth-child(even)    { background-color:#fff; }
	
	table.border{
		width: 100%; 
		margin:auto; 
		border-collapse: collapse;
		border: 3px solid #666666; 
	}
	td.border {
		padding: 2px;
		padding-left: 6px;
		border: 2px solid #666666;
	}
{% endblock %}

{% block content %}
<h2> Approve Volunteer Hours for {{ volunteer }} </h2>

<table>
    <tr>
        <td>
            Work Site: {{ volunteer.site }} <br/>
            Supervisor: {{ volunteer.site_supervisor }} <br/>
            Hours Complete: {{ volunteer.hours_completed }} <br/>
            Hours Required: {{ volunteer.hours_required }} <br/>
        </td>
        <td style="padding:30px;">
            <table class="border">
                <tr class="border">
                    <th class="border">Date</th>
                    <th class="border">Site</th>
                    <th class="border">Hours</th>
                    <th class="border">Submited</th>
                </tr>
                 {% for hour in volunteer.hours_set.all %}
                    <tr class="border">
                        <td class="border">{{ hour.date }}</td>
                        <td class="border">{{ hour.site }}</td>
                        <td class="border" style="text-align: right;">{{ hour.hours }}</td>
                        <td class="border">{{ hour.time_stamp }}</td>
                    </tr>
                {% endfor %}
            </table>
        </td>
    </tr>
</table>

<form method="post">
    <input type="submit" name="approve" value="Click here approve"/> 
</form>
If there is a problem please contact school staff.

{% endblock %}
